<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/form.css">

    <style>

        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        h1 {
            width: 1200px;
            height: 90px;
            margin: 0 auto;
            background-color: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        h1>p {
            font-size: 20px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 50px;
            display: none;
        }


        .correct>a {
            font-size: 20px;
            position: absolute;
            top: 6%;
            transform: translateY(-50%);
            right: 150px;
            color: red;
            padding-top: 75px;
        }

        .back>a {
            font-size: 20px;
            position: absolute;
            top: 6%;
            transform: translateY(-50%);
            right: 50px;
            color: red;
            padding-top: 75px;
        }

        form {
            width: 450px;
            display: flex;
            flex-direction: column;
            padding: 20px;
            border: 3px solid pink;
            border-radius: 15px;
            margin: 30px auto;
            padding-top: 50px;
            position: relative;
        }

        form>label {
            height: 50px;
            font-size: 22px;
        }

        form>label>input {
            padding-left: 22px;
            font-size: 22px;
        }

        form>input {
            font-size: 22px;
        }

        form>label>select {
            font-size: 18px;
            padding: 3px 10px 3px 10px;
        }

        form>button {
            font-size: 22px;
        }

    </style>
</head>
<body>
    <h1><div class="header container">个人中心
        <p style="display: block;">
            <p class="correct "><a href="./rpwd.html">修改密码</a></p>
            <p class="back "><a href="./index.html">回到首页</a></p>
        </p>
    </div></h1>
    <form>
        <label>
            用户名：<input type="text" class="username" disabled>
        </label>
        <label>
            年&nbsp;&nbsp;&nbsp;&nbsp;龄：<input type="text" class="age">
        </label>
        <label>
            性&nbsp;&nbsp;&nbsp;&nbsp;别：<select class="gender">
                <option value="">请选择</option>
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </label>
        <label>
            昵&nbsp;&nbsp;&nbsp;&nbsp;称：<input type="text" class="nickname">
        </label>
        <button>确认修改</button>
    </form>
    
    <script src="../lib/axios.min.js"></script>
    <script src="../lib/http.js"></script>
    <!-- <script src="../js/self.js"></script> -->

</body>
<script>
    document.addEventListener('DOMContentLoaded', function () {
            var currentUser = JSON.parse(localStorage.getItem('currentUser'));
            if (currentUser) {
                // 填充用户基本信息到表单
                document.querySelector('.username').value = currentUser.username;
                document.querySelector('.age').value = currentUser.age;
                document.querySelector('.gender').value = currentUser.gender;
                document.querySelector('.nickname').value = currentUser.nickname;

                var form = document.querySelector('form');
                form.addEventListener('submit', function (e) {
                    e.preventDefault();
                    var data = {
                        id: currentUser.id,
                        age: document.querySelector('.age').value,
                        gender: document.querySelector('.gender').value,
                        nickname: document.querySelector('.nickname').value
                    };
                    // 模拟修改成功，这里只是简单地重新加载页面来模拟跳转到修改后的信息展示页面
                    localStorage.setItem('currentUser', JSON.stringify(data));
                    alert('修改成功，即将刷新页面显示更新后的信息');
                    window.location.reload();
                });
            } else {
                window.location.href = './login.html';
            }
        });
</script>
</html>